<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover">
  <!-- <meta name="viewport" content="width=device-width, initial-scale=0.6, maximum-scale=0.6, minimum-scale=0.6, user-scalable=yes" /> -->
  <!-- <meta name="viewport" content="width=device-width, initial-scale=1.3, maximum-scale=1.3, minimum-scale=1.3, user-scalable=yes" /> -->
  <title>vConsole: Custom Plugin</title>
  <link href="./lib/weui.min.css" rel="stylesheet"/>
  <link href="./lib/demo.css" rel="stylesheet"/>

  <script src="../dist/vconsole.min.js"></script>
</head>
<body ontouchstart>
  <div class="page">
    <a onclick="newTab()" href="javascript:;" class="weui_btn weui_btn_default">newTab</a>
    <a onclick="newTabWithTool()" href="javascript:;" class="weui_btn weui_btn_default">newTabWithTool</a>
    <a onclick="newGlobalToolButton()" href="javascript:;" class="weui_btn weui_btn_default">newGlobalToolButton</a>
    <a onclick="newTabUseJQuery()" href="javascript:;" class="weui_btn weui_btn_default">newTabUseJQuery</a>
    <a onclick="newTabUseDOM()" href="javascript:;" class="weui_btn weui_btn_default">newTabUseDOM</a>
    <a onclick="newBuiltinTab()" href="javascript:;" class="weui_btn weui_btn_default">newBuiltinTab</a>
    <a onclick="removePlugin()" href="javascript:;" class="weui_btn weui_btn_default">removePlugin</a>
  </div>
</body>
</html>

<script>
window.vConsole = new window.VConsole({
  pluginOrder: ['tab1', 'storage', 'element', 'network'],
  onReady: function() {
    console.log('vConsole is ready.');
  },
});

function newTab() {
  var tab = new window.VConsole.VConsolePlugin('tab1', 'Tab1');
  tab
  .on('init', function() { console.log(this.id, 'init'); })
  .on('renderTab', function(cb) {
    console.log(this.id, 'renderTab');
    cb('<div>I am ' + this.id+'</div>');
  })
  .on('ready', function() {  console.log(this.id, 'ready'); })
  .on('show', function() { console.log(this.id, 'show'); })
  .on('hide', function() { console.log(this.id, 'hide'); })
  .on('showConsole', function() { console.log(this.id, 'showConsole'); })
  .on('hideConsole', function() { console.log(this.id, 'hideConsole'); });
  vConsole.addPlugin(tab);
  vConsole.show();
  vConsole.showPlugin('tab1');
}

function newTabWithTool() {
  console.info('newTabWithTool() Start');
  var tab = new window.VConsole.VConsolePlugin('tab2', 'Tab2');
  tab.on('renderTab', function(cb) {
    console.log(this.id, 'renderTab');
    cb('<div>I am ' + this.id+'</div>');
  })
  .on('addTool', function(cb) {
    console.log(this.id, 'addTool');
    cb([
      {
        name: 'Alert',
        global: false,
        onClick: function(e) {
          alert('I am a tool button!');
        }
      }
    ]);
  });
  vConsole.addPlugin(tab);
  console.info('newTabWithTool() End');
}

function newGlobalToolButton() {
  console.info('newGlobalToolButton() Start');
  var plugin = new window.VConsole.VConsolePlugin('plugin3', 'Plugin3');
  plugin.on('addTool', function(cb) {
    console.log(this.id, 'addTool');
    cb([
      {
        name: 'Global',
        global: true,
        onClick: function(e) {
          alert('I am a global tool button!');
        }
      }
    ]);
  });
  vConsole.addPlugin(plugin);
  console.info('newGlobalToolButton() End');
}

function newTabUseJQuery() {
  console.info('newTabUseJQuery() Start');
  var tab = new window.vConsole.VConsolePlugin('tab4', 'Tab4');
  var $html = $('<div><a href="javascript:;">Alert</a></div>');
  $html.find('a').click(function() {
    alert('OK');
  });
  tab.on('renderTab', function(cb) {
    cb($html);
  });
  vConsole.addPlugin(tab);
  console.info('newTabUseJQuery() End');
}

function newTabUseDOM() {
  console.info('newTabUseDOM() Start');
  var tab = new window.vConsole.VConsolePlugin('tab5', 'Tab5');
  var $elm = document.createElement('DIV');
  $elm.innerHTML = '<p>It works</p>';
  tab.on('renderTab', function(cb) {
    cb($elm);
  });
  vConsole.addPlugin(tab);
  console.info('newTabUseDOM() End');
}

function newBuiltinTab() {
  class MyPlugin extends window.VConsole.VConsoleStoragePlugin {

  }
  var plugin = new MyPlugin('tab6', 'Tab6');
  vConsole.addPlugin(plugin);
  vConsole.show();
  vConsole.showPlugin('tab6');
}

const pluginList = ['default', 'system', 'network', 'element', 'storage'];
function removePlugin() {
  console.info('removePlugin() Start');
  const id = pluginList.pop();
  vConsole.removePlugin(id);
  console.info('removePlugin() End');
}

</script>